<template>
  <div class="bodyBox">
    <div class="topBox"></div>
    <div class="showBox">
      <div class="leftBox">
        <draggable
          :list="dragList"
          ghost-class="ghost"
          :force-fallback="true"
          :group="{ name: 'list', pull: 'clone' }"
          :sort="false"
          itemKey="id"
        >
          <template #item="{ element }">
            <div class="item move">
              <label class="move">{{ element.name }}</label>
            </div>
          </template>
        </draggable>
      </div>
      <div class="middleBox">
        <draggable
          :list="widgetList"
          ghost-class="ghost"
          itemKey="id"
          :force-fallback="true"
          group="list"
          :fallback-class="true"
          :fallback-on-body="true"
          class="drag-content"
          :sort="true"
          @end="onend"
        >
          <template #item="{ element }">
            <div class="item move">
              <label class="move title">{{ element.name }}</label>
              <component :is="getWid(element.element)"></component>
            </div>
          </template>
        </draggable>
      </div>
      <div class="rightBox"></div>
    </div>
  </div>
</template>
<script setup>
import Socket from '@/utils/socket.js'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useLowCodeStore } from '@/store/index.js'
import { storeToRefs } from 'pinia'
import getName from '@/ComponentLibrary/agetCompent.js'
import draggable from 'vuedraggable'
//导入draggable组件
const dragList = ref([
  { name: "单行文本", id: 1, element: 'Button' },
  { name: "多行文本", id: 2, element: 'Button' },
  { name: "计数器", id: 3, element: 'Button' },
  { name: "单选框组", id: 4, element: 'Button' },
])
const widgetList = ref([
  // { name: "多行文本", id: 2 },
])
const getWid = (name) => {
  return getName[name]
}
const onend = () => {
  console.log(widgetList.value)
}
const store = useLowCodeStore()

/**
 * 使用 storeToRefs()。它将为每一个响应式属性创建引用。
 * 当你只使用 store 的状态而不调用任何 action 时，它会非常有用。
 * 请注意，你可以直接从 store 中解构 action，因为它们也被绑定到 store 上
 */
const { count } = storeToRefs(store)
// 作为 action 的 increment 可以直接解构
const { increment } = store
// const testSocket = new Socket(btnSendSocket)
setTimeout(() => {
  increment()
}, 1000)
const doubleValue = computed(() => store.doubleCount)
console.log(doubleValue, 'wang')
// testSocket.init()
// testSocket.receive = (res) => {
//   console.log(JSON.parse(res.data))

// }
const testOPtion = computed(() => {
  return {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  }
})

onMounted(() => {

})
onUnmounted(() => {

})
</script>

<style scoped  lang="scss">
.bodyBox {
  // width: 500px;
  // height: 300px;
  .topBox {
  }
  .showBox {
    display: flex;
    .leftBox {
      width: 200px;
      height: 100px;
      background: rgb(216, 208, 208);
    }
    .middleBox {
      width: 1500px;
      height: 500px;
      background: rgb(235, 228, 228);
      margin-left: 10px;
      .drag-content {
        height: 500px;
        width: 200px;
      }
    }
    .rightBox {
      width: 200px;
      height: 100px;
      margin-left: 10px;
      background: rgb(216, 208, 208);
    }
  }
}
</style>
